<template>
    <div class="home-container">
        {{ list }}
        <MyPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='reqParams.page' />
    </div>
</template>
 
<script setup>
import { onBeforeMount, reactive, ref } from 'vue'
import MyPagination from '@/components/Pagination.vue'
import { getList } from '@/api/index.js'

const list = ref([])
const total = ref(0)
// 筛选条件准备
const reqParams = reactive({
    // 当前页码
    page: 1,
    // 每页的条数
    pageSize: 10
})
// 控制页码的变化
const changePage = (page) => {
    // 修改分页参数，重新调用接口即可
    reqParams.page = page
    getList(reqParams.page).then(res => {
        list.value = res.records
    })
}
onBeforeMount(() => {
    getList(reqParams.page).then(res => {
        total.value = res.total
        reqParams.pageSize = res.size
        list.value = res.records
    })
})

</script>
 
<style lang="less">
.home-container {
    margin: 100px auto;
    width: 1000px;
    height: 100px;
}
</style>
 